<template>
  <div>
    <van-tabs v-model="tabCourseActive"
              @click="handleClick">
      <van-tab title="我发布的">
        <van-card :thumb="item.publisherHeader"
                  v-for="(item,index) in substitueReq"
                  :key="index"
                  @click="handSku(item)">
          <div slot="title"
               class="title">课程名称:{{item.courseName}}</div>
          <div slot="desc"
               class="intro">上课时间:{{item.courseTime}}</div>
          <div slot="desc"
               class="intro">上课地点:{{item.coursePlace}}</div>
          <div slot="desc"
               class="intro">赏金:{{item.reward}}</div>
        </van-card>
      </van-tab>
      <van-tab title="我代课的">
        <van-card :thumb="item.publisherHeader"
                  v-for="(item,index) in substitueReq"
                  :key="index"
                  @click="handSku(item)">
          <div slot="title"
               class="title">课程名称:{{item.courseName}}</div>
          <div slot="desc"
               class="intro">上课时间:{{item.courseTime}}</div>
          <div slot="desc"
               class="intro">上课地点:{{item.coursePlace}}</div>
          <div slot="desc"
               class="intro">赏金:{{item.reward}}</div>
        </van-card>
      </van-tab>
      <van-tab title="我收藏的">
        <van-card :thumb="item.publisherHeader"
                  v-for="(item,index) in substitueReq"
                  :key="index"
                  @click="handSku(item)">
          <div slot="title"
               class="title">课程名称:{{item.courseName}}</div>
          <div slot="desc"
               class="intro">上课时间:{{item.courseTime}}</div>
          <div slot="desc"
               class="intro">上课地点:{{item.coursePlace}}</div>
          <div slot="desc"
               class="intro">赏金:{{item.reward}}</div>
        </van-card>
      </van-tab>
    </van-tabs>
    <van-sku v-model="isShowCourse"
             :sku="course"
             :goods="courseTitle"
             close-on-click-overlay>
      <template slot="sku-header-price">
        <div class="van-sku__goods-price">
          <span>赏金：</span>
          <span class="van-sku__price-symbol">￥</span>
          <span class="van-sku__price-num">{{ course.reward || 0}}</span>
        </div>
      </template>
      <template slot="sku-group">
        <van-row class="row"
                 type="flex"
                 align="center">
          <van-col span="5"
                   offset="1">
            学校：
          </van-col>
          <van-col span="10">
            {{course.school}}
          </van-col>
        </van-row>

        <van-row v-show="course.hasName"
                 class="row"
                 type="flex"
                 align="center">
          <van-col span="5"
                   offset="1">
            姓名：
          </van-col>
          <van-col span="10">
            {{course.publisherName}}
          </van-col>
        </van-row>

        <van-row v-show="course.hasStuId"
                 class="row"
                 type="flex"
                 align="center">
          <van-col span="5"
                   offset="1">
            学号：
          </van-col>
          <van-col span="10">
            {{course.studentId}}
          </van-col>
        </van-row>

        <van-row v-show="course.hasPhone"
                 class="row"
                 type="flex"
                 align="center">
          <van-col span="5"
                   offset="1">
            电话：
          </van-col>
          <van-col span="10">
            {{course.phone}}
          </van-col>
        </van-row>

        <van-row class="row"
                 type="flex"
                 align="center">
          <van-col span="5"
                   offset="1">
            开课时间：
          </van-col>
          <van-col span="10">
            {{course.courseTime}}
          </van-col>
        </van-row>

        <van-row class="row"
                 type="flex"
                 align="center">
          <van-col span="5"
                   offset="1">
            上课讲次：
          </van-col>
          <van-col span="10">
            {{course.courseClass}}
          </van-col>
        </van-row>

        <van-row class="row"
                 type="flex"
                 align="center">
          <van-col span="5"
                   offset="1">
            上课地点：
          </van-col>
          <van-col span="10">
            {{course.coursePlace}}
          </van-col>
        </van-row>
      </template>

      <!-- 留言区 -->
      <template slot="sku-stepper">
        <van-row type="flex">
          <van-col span="5"
                   offset="1">
            留言：
          </van-col>
          <van-col span="17">
            {{course.remark}}
          </van-col>
        </van-row>
      </template>
      <!-- 自定义 sku actions -->
      <template slot="sku-actions">
        <div class="van-sku-actions">
          <!-- <van-button bottom-action
                      @click="onCollectionClicked">收藏课程</van-button>
                      -->
          <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
          <!--
          <van-button type="primary"
                      bottom-action
                      @click="onSubstituteClicked(course)">立即代课</van-button> -->
        </div>
      </template>
    </van-sku>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      tabCourseActive: 0,
      substitueReq: [],
      isShowCourse: false,
      course: {},
      courseTitle: {
        // 商品标题
        title: '',
        // 默认商品 sku 缩略图
        picture: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.mine.user
    })
  },
  mounted () {
    this.handleClick(0)
  },
  methods: {
    handleClick (index) {
      console.log(this.user)
      if (index === 0) {
        this.$http.getCourseByType({ type: 'publish', userId: this.user.userId }).then(res => {
          console.log(res)
          this.substitueReq = res.data
        })
      } else if (index === 1) {
        this.$http.getCourseByType({ type: 'substitute', userId: this.user.userId }).then(res => {
          console.log(res)
          this.substitueReq = res.data
        })
      } else if (index === 2) {
        this.$http.getCourseByType({ type: 'collect', userId: this.user.userId }).then(res => {
          console.log(res)
          this.substitueReq = res.data
        })
      }
    },
    handSku (row) {
      this.isShowCourse = true
      this.course = row
      this.courseTitle.title = row.courseName
      this.courseTitle.picture = row.publisherHeader
      this.course.tree = [
        {
          v: [
            {}, {}
          ]
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
.van-tab--active
  span
    color: #f00
</style>
